<!-- 特殊作业 -->
<template>
	<view class="special-container" :style="{ height: `${windowHeight}px` }">
		<view class="fix-top">
			<!-- tabs选项 -->
			<view class="tabs">
				<view :class="tabsActive === 0 ? 'tabs-item-active' : 'tabs-item'"
					v-if="checkPermi(['system:master:list'])">
					<template v-if="tabsActive === 0">
						<picker @change="bindPickerChange" :value="index" :range="options" range-key="label">
							<!-- <view class="uni-input">{{options[index].label}}</view> -->
							<view class="uni-input">
								<text>作业类型</text>
								<uni-icons type="down" size="14"></uni-icons>

							</view>
						</picker>
					</template>
					<template v-else>

						<view :class="tabsActive === 0 ? 'tabs-item-active' : 'tabs-item'" @click="handleTab(0)">
							作业管理
						</view>
					</template>


				</view>
				<view :class="tabsActive === 1 ? 'tabs-item-active' : 'tabs-item'"
					v-if="checkPermi(['system:master:order:list'])" @click="handleTab(1)">
					作业清单
				</view>
				<view :class="tabsActive === 2 ? 'tabs-item-active' : 'tabs-item'"
					v-if="checkPermi(['system:master:statistics'])" @click="handleTab(2)">
					作业统计
				</view>
			</view>

			<uni-nav-bar v-if="tabsActive != 2">
				<block slot="left">

				</block>

				<view class="input-view">
					<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
					<input confirm-type="search" v-model="queryForm.jobNumber" class="nav-bar-input" type="text"
						placeholder="请输入" @confirm="confirm" />

				</view>

				<block slot="right">
					<view class="city" @click="search">
						搜索
					</view>
				</block>
			</uni-nav-bar>
			<view class="work-type-board" v-if="tabsActive == 0" @click="
				  addBtn(`/pages/specialWork/otherViews/workApply?title=${options[index].label}`)
				">
				<view class="content">
					<view class="check-title">{{options[index].label}}</view>
					<view>
						<uni-icons type="plusempty" size="14"></uni-icons>
						<text>新增特殊作业</text>
					</view>

				</view>

			</view>
		</view>

		<!-- 主体内容 -->
		<!-- 九大作业类型 -->
		<view class="work-type" v-if="tabsActive === 0">
			<!-- 作业管理 -->
			<view class="work-manage" :style="{'top': tabsActive == 1 ? '200rpx' : '400rpx' }">
				<z-paging ref="paging" v-model="tableData" style="top: 480rpx" @query="queryList">
					<uni-list :border="false" v-for="(item, index) in tableData" :key="index" class="list-view-item">
						<view class="title">
							{{ item.specialJobType }} ---
							<text class="title-flow">{{
						  formatSpecialStatus(item)
						}}</text>
						</view>
						<uni-list-item title="作业票号：" :rightText="item.jobNumber" />
						<uni-list-item title="申请部门：" :rightText="item.specialApplicationDeptName" />
						<uni-list-item title="申请人：" :rightText="item.personDoneName" />
						<uni-list-item title="计划作业时间：" :rightText="item.specialStartTime" />
						<uni-list-item title="动火地点及部位：" :rightText="item.specialSite" />
						<uni-list-item title="代办人：" :rightText="item.personDoneName" />
						<view class="btns">
							<!-- <button size="default" type="default" class="list-btn list-click" hover-class="is-hover">
												查看详情
											</button> -->
							<button size="default" type="default" class="list-btn"
								v-if="item.enable && item.specialStatus != 1001" hover-class="is-hover" @click="
						    goto(
						      `/pages/specialWork/otherViews/flow?title=${item.specialJobType}&flow=${item.specialStatus}&id=${item.id}`, item
						    )
						  ">
								{{formatSpecialStatus(item)}}
							</button>
						</view>
					</uni-list>

				</z-paging>

			</view>

		</view>
		<!-- 作业清单 -->
		<view class="work-list" v-if="tabsActive === 1">
			<!-- <view class="select"> -->
			<!-- <view class="all">全部</view>
				<view class="select-type">
					<text>作业类型</text>
					<uni-icons type="bottom" size="14" class="select-icon"></uni-icons>
				</view>
				<view class="select-level">
					<text>作业级别</text>
					<uni-icons type="bottom" size="14" class="select-icon"></uni-icons>
				</view>
				<view class="select-state">
					<text>作业状态</text>
					<uni-icons type="bottom" size="14" class="select-icon"></uni-icons>
				</view> -->
			<!-- </view> -->
			<view class="work-manage" :style="{'top': tabsActive == 1 ? '220rpx' : '400rpx' }">
				<!-- <z-paging ref="paging" v-model="workList" style="top: 480rpx" @query="queryWorkList"> -->
				<uni-list :border="false" v-for="(item, index) in workList" :key="index" class="list-view-item">
					<view class="title">
						{{ item.specialJobType }}

					</view>
					<uni-list-item title="作业票号：" :rightText="item.jobNumber" />
					<uni-list-item title="作业类型：" :rightText="item.specialJobType" />
					<uni-list-item title="申请部门：" :rightText="item.specialApplicationDeptName" />
					<uni-list-item title="申请人：" :rightText="item.personDoneName" />
					<uni-list-item title="计划作业时间：" :rightText="item.specialStartTime" />
					<!-- <uni-list-item title="动火地点及部位：" :rightText="item.specialSite" /> -->
					<uni-list-item title="作业状态：" :rightText="formatSpecialStatus(item)" />
					<uni-list-item title="申请人：" :rightText="item.createBy" />
					<uni-list-item title="申请时间：" :rightText="item.createTime" />

					<view class="btns-two">
						<button size="mini" type="primary" class="list-btn list-click" hover-class="is-hover"
							@click="messageToggle('warn')">
							查看
						</button>
						<!-- <button size="default" type="default" class="list-btn" hover-class="is-hover" @click="
					    goto(
					      `/pages/specialWork/otherViews/flow?title=${selectActive}&flow=${item.flowActive}`
					    )
					  ">
											{{ item.flowActive | workTypeFlowFilter }}
					
										</button> -->
					</view>
				</uni-list>
				<!-- 提示信息弹窗 -->
				<uni-popup ref="message" type="message">
					<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
				</uni-popup>
				<!-- </z-paging> -->

			</view>

		</view>
		<!-- 作业统计 -->
		<view class="work-analyze" v-if="tabsActive === 2">
			<view class="work-manage" :style="{'top': tabsActive == 1 ? '220rpx' : '70rpx' }">
				<!-- 各公司当月审批作业统计 -->
				<view class="statistics-item">
					<view class="font-title">
						<text>各公司当月审批作业统计</text>
					</view>
					<view class="statistics-content">
						<view class="legend-data">
							<view class="legend-item">
								<view class="left-icon" style="	background: #3F7DF0;"></view>
								<view class="right-title">动火</view>
							</view>

							<view class="legend-item">
								<view class="left-icon" style="background: #1DD0C4;"></view>
								<view class="right-title">动土</view>
							</view>
							<view class="legend-item">
								<view class="left-icon" style="	background: #FECC0D;"></view>
								<view class="right-title">受限空间</view>
							</view>
							<view class="legend-item">
								<view class="left-icon" style="	background: #FF830F;"></view>
								<view class="right-title">高处</view>
							</view>

							<view class="legend-item">
								<view class="left-icon" style="	background: #E94B5F;"></view>
								<view class="right-title">吊装</view>
							</view>
							<view class="legend-item">
								<view class="left-icon" style="background: #BCA2FF;"></view>
								<view class="right-title">盲板</view>
							</view>
							<view class="legend-item">
								<view class="left-icon" style="background: #775199;"></view>
								<view class="right-title">临时用电</view>
							</view>
							<view class="legend-item">
								<view class="left-icon" style="background: #EE82AB;"></view>
								<view class="right-title">断路</view>
							</view>
						</view>
						<view style="width: 100%; height: 280px;" ref="chartContainer" id="chartContainer"
							class="chart-container"></view>
					</view>
				</view>

				<!-- 当月审批作业统计 -->
				<view class="statistics-item">
					<view class="top-area">
						<view class="two-left-title">
							<text>当月审批作业统计</text>
						</view>
						<view class="view-select">
							<uni-data-select v-model="checkCompany" :localdata="companyOption" @change="changeCompany"
								:arrayConfig="configParams"></uni-data-select>
						</view>

					</view>
					<view class="statistics-content">

						<view style="width: 100%; height: 300px;" ref="chartContainerTwo" id="chartContainerTwo"
							class="chart-container"></view>
					</view>
				</view>
				<!-- 实际作业统计 -->
				<view class="statistics-item">
					<view class="font-title">
						<text>实际作业统计(近10天)</text>
					</view>
					<view class="statistics-content">
						<view class="legend-data">
							<view class="legend-item">
								<view class="left-icon" style="	background: #3F7DF0;"></view>
								<view class="right-title">动火</view>
							</view>

							<view class="legend-item">
								<view class="left-icon" style="background: #1DD0C4;"></view>
								<view class="right-title">动土</view>
							</view>
							<view class="legend-item">
								<view class="left-icon" style="	background: #FECC0D;"></view>
								<view class="right-title">受限空间</view>
							</view>
							<view class="legend-item">
								<view class="left-icon" style="	background: #FF830F;"></view>
								<view class="right-title">高处</view>
							</view>

							<view class="legend-item">
								<view class="left-icon" style="	background: #E94B5F;"></view>
								<view class="right-title">吊装</view>
							</view>
							<view class="legend-item">
								<view class="left-icon" style="background: #BCA2FF;"></view>
								<view class="right-title">盲板</view>
							</view>
							<view class="legend-item">
								<view class="left-icon" style="background: #775199;"></view>
								<view class="right-title">临时用电</view>
							</view>
							<view class="legend-item">
								<view class="left-icon" style="background: #EE82AB;"></view>
								<view class="right-title">断路</view>
							</view>
						</view>
						<view style="width: 100%; height: 280px;" ref="chartContainerThree" id="chartContainerThree"
							class="chart-container"></view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import widowHeightMixins from "@/mixins/widowHeightMixins.js";
	import tabs from "@/components/tabs/index";
	import store from "@/store/index.js"
	import {
		searchFireWork,
		detailFireWork,
	} from "@/api/specialWork/hotWork.js";
	import {
		formatObject
	} from "utils/tool.js"
	import {
		mapGetters
	} from "vuex"
	import {
		checkPermi,
		checkRole
	} from "@/utils/permission"; // 权限判断函数
	import {
		specialWorkMenu
	} from "@/utils/menuAuth.js"
	import {
		Statistics
	} from "./component/statistics.vue"
	import {
		deptTreeSelect
	} from "@/api/system/user.js"
	import * as echarts from 'echarts' // 引入ECharts库
	export default {
		components: {
			tabs,
			// Statistics
		},
		mixins: [widowHeightMixins],
		data() {
			return {
				loading: false,
				index: 0,
				//查询参数
				queryForm: {},
				configParams: {
					labelKey: "littleName",
					valueKey: "id"
				},
				checkCompany: "", //选中公司
				companyOption: [], //下属公司option
				myChart: null,
				msgType: 'info',
				messageText: 'tishide ',
				options: [{
						label: '动火作业票',
						value: '动火作业票',
					},
					{
						label: '吊装作业票',
						value: '吊装作业票',
					},
					{
						label: '动土作业票',
						value: '动土作业票',
					},
					{
						label: '断路作业票',
						value: '断路作业票',
					},
					{
						label: '高处作业票',
						value: '高处作业票',
					},
					{
						label: '临时用电安全作业票',
						value: '临时用电安全作业票',
					},
					{
						label: '盲板抽堵安全作业票',
						value: '盲板抽堵安全作业票',
					},
					{
						label: '受限空间安全作业票',
						value: '受限空间安全作业票',
					},

				],
				tabsActive: 0,
				selectActive: "动火作业票",
				searchValue: "", //搜索框绑定的
				tableData: [],
				workList: [],
			};
		},
		//下拉刷新
		onReachBottom() {
			// console.log("楚地下拉刷新")
		},
		onReady() {
			// 页面准备就绪后的操作
			// console.log("onReady===")

		},
		methods: {
			checkPermi,
			/**搜索按钮 */
			async searchBtn() {
				uni.showLoading({
					title: "加载中"
				})
				this.queryForm.specialJobType = this.options[this.index].label
				// console.log("测试数据", this.queryForm)
				const res = await searchFireWork(this.queryForm);
				this.tableData = res.rows;
				uni.hideLoading()

			},
			//获取舟港下属公司
			async getSomCompany() {
				let query = {
					deptType: 1
				}
				let {
					data
				} = await deptTreeSelect(query)
				this.companyOption = data[0].children
			},
			//公司change事件
			changeCompany(val) {
				console.log("切换公司", val)
			},
			//初始化echarts
			initChart() {
				const myChartContainer = document.getElementById("chartContainer")
				// const myChartContainer = this.$refs.chartContainer
				this.myChart = echarts.init(myChartContainer)
				let option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					color: ['#3F7DF0', '#1DD0C4', '#FECC0D', '#FF830F', '#E94B5F', '#BCA2FF', '#775199', '#EE82AB'],
					legend: {
						show: false
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '4%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: ['海通轮驳', '老塘山', '外钓油品', '兴港', '中理', '中澳码头', '综合保税区', '港海物流'],
						axisLabel: {
							rotate: 45,
							color: '#515A6E', // x轴字体颜色
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							lineStyle: {
								color: '#E8EAEC',
								width: 2
							}
						},
					}],
					yAxis: [{
						type: 'value',
						axisLabel: {
							color: '#515A6E', // x轴字体颜色
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							lineStyle: {
								color: '#E8EAEC',
								width: 2
							}
						},
					}],
					series: [{
							name: '动火',
							type: 'bar',
							stack: 'Ad',
							emphasis: {
								focus: 'series'
							},
							data: [120, 132, 101, 134, 90, 230, 210]
						},
						{
							name: '动土',
							type: 'bar',
							stack: 'Ad',
							emphasis: {
								focus: 'series'
							},
							data: [220, 182, 191, 234, 290, 330, 310]
						},

						{
							name: '受限空间',
							type: 'bar',
							barWidth: 9,
							stack: 'Ad',
							emphasis: {
								focus: 'series'
							},
							data: [620, 732, 701, 734, 1090, 1130, 1120]
						},

						{
							name: '高处',
							type: 'bar',
							stack: 'Ad',
							emphasis: {
								focus: 'series'
							},
							data: [60, 72, 71, 74, 190, 130, 110, 70]
						},
						{
							name: '吊装',
							type: 'bar',
							stack: 'Ad',
							emphasis: {
								focus: 'series'
							},
							data: [62, 82, 91, 84, 109, 110, 120, 80]
						},
						{
							name: '盲板',
							type: 'bar',
							stack: 'Ad',
							emphasis: {
								focus: 'series'
							},
							data: [62, 82, 91, 84, 109, 110, 120, , 100]
						},
						{
							name: '临时用电',
							type: 'bar',
							stack: 'Ad',
							emphasis: {
								focus: 'series'
							},
							data: [62, 82, 91, 84, 109, 110, 120, 90]
						},
						{
							name: '断路',
							type: 'bar',
							stack: 'Ad',
							emphasis: {
								focus: 'series'
							},
							data: [62, 82, 91, 84, 109, 110, 120, 70]
						},
					]
				}
				this.myChart.setOption(option)
			},
			// chartContainerTwo
			initChartTwo() {
				const myChartContainer = document.getElementById("chartContainerTwo")
				// const myChartContainer = this.$refs.chartContainer
				this.myChart = echarts.init(myChartContainer)
				let option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					color: ['#65A1FF'],
					legend: {
						show: false
					},
					grid: {
						left: '3%',
						right: '4%',
						top: '3%',
						bottom: '10%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: ['海通轮驳', '老塘山', '外钓油品', '兴港', '中理', '中澳码头', '综合保税区', '港海物流'],
						axisLabel: {
							rotate: 45,
							color: '#515A6E', // x轴字体颜色
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							lineStyle: {
								color: '#E8EAEC',
								width: 2
							}
						},
					}],
					yAxis: [{
						type: 'value',
						axisLabel: {
							color: '#515A6E', // x轴字体颜色
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							lineStyle: {
								color: '#E8EAEC',
								width: 2
							}
						},
					}],
					series: [{
						name: '动火',
						type: 'bar',
						stack: 'Ad',
						barWidth: 10,
						emphasis: {
							focus: 'series'
						},
						data: [120, 132, 101, 134, 90, 230, 210, 200]
					}, ]
				}
				this.myChart.setOption(option)
			},
			//初始化echarts
			initChartThree() {
				const myChartContainer = document.getElementById("chartContainerThree")
				// const myChartContainer = this.$refs.chartContainer
				this.myChart = echarts.init(myChartContainer)
				let option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					color: ['#3F7DF0', '#1DD0C4', '#FECC0D', '#FF830F', '#E94B5F', '#BCA2FF', '#775199', '#EE82AB'],
					legend: {
						show: false
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '4%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: ['海通轮驳', '老塘山', '外钓油品', '兴港', '中理', '中澳码头', '综合保税区', '港海物流'],
						axisLabel: {
							rotate: 45,
							color: '#515A6E', // x轴字体颜色
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							lineStyle: {
								color: '#E8EAEC',
								width: 2
							}
						},
					}],
					yAxis: [{
						type: 'value',
						axisLabel: {
							color: '#515A6E', // x轴字体颜色
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							lineStyle: {
								color: '#E8EAEC',
								width: 2
							}
						},
					}],
					series: [{
							name: '动火',
							type: 'line',

							emphasis: {
								focus: 'series'
							},
							data: [12, 13, 10, 13, 9, 23, 21]
						},
						{
							name: '动土',
							type: 'line',

							emphasis: {
								focus: 'series'
							},
							data: [22, 18, 19, 23, 29, 33, 31]
						},

						{
							name: '受限空间',
							type: 'line',

							emphasis: {
								focus: 'series'
							},
							data: [6, 7, 7, 7, 1, 11, 11]
						},

						{
							name: '高处',
							type: 'line',

							emphasis: {
								focus: 'series'
							},
							data: [6, 7, 7, 7, 1, 13, 11, 7]
						},
						{
							name: '吊装',
							type: 'line',

							emphasis: {
								focus: 'series'
							},
							data: [6, 8, 9, 8, 10, 11, 12, 8]
						},
						{
							name: '盲板',
							type: 'line',

							emphasis: {
								focus: 'series'
							},
							data: [6, 8, 9, 8, 10, 11, 12, 10]
						},
						{
							name: '临时用电',
							type: 'line',

							emphasis: {
								focus: 'series'
							},
							data: [6, 8, 9, 8, 10, 11, 12, 9]
						},
						{
							name: '断路',
							type: 'line',
							emphasis: {
								focus: 'series'
							},
							data: [6, 8, 9, 8, 10, 11, 12, 7]
						},
					]
				}
				this.myChart.setOption(option)
			},
			messageToggle(type) {
				this.msgType = type
				this.messageText = `请前往pc端 查看详情`
				this.$refs.message.open()
			},
			//分页方法
			async queryList(pageNum, pageSize) {
				// console.log("分页", pageNum, pageSize)
				this.queryForm.pageNum = pageNum
				this.queryForm.pageSize = pageSize
				const res = await searchFireWork(this.queryForm);
				// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
				this.$refs.paging.complete(res.rows);
				// this.checkList = res.rows;
			},
			/** 作业状态 */
			formatSpecialStatus(row) {

				if (row.specialStatus == 1) {
					return "作业申请";
				} else if (row.specialStatus == 2) {
					return "措施填写";
				} else if (row.specialStatus == 3) {
					return "措施确认";
				} else if (row.specialStatus == 4) {
					return "现场确认";
				} else if (row.specialStatus == 5) {
					return "审核";
				} else if (
					(row.specialStatus == 6 && row.specialJobType == "动火作业票") ||
					row.specialJobType == "受限空间安全作业票"
				) {
					return "作业分析";
				} else if (row.specialStatus == 6 && row.specialJobType != "动火作业票") {
					return "指定签字人";
				} else if (row.specialStatus == 7) {
					return "结束作业";
				} else if (row.specialStatus == 1001) {
					return "已完结";
				}
			},
			//种类的change事件
			async bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail)
				this.index = e.detail.value
				this.queryForm = {
					specialJobType: this.options[this.index].label
				}
				let res = await searchFireWork(this.queryForm)
				this.tableData = res.rows;

			},
			async handleTab(index) {
				console.log(index, "111");
				this.tabsActive = index;
				if (index == 1) { //作业清单
					this.queryForm = {
						specialApplicationUnit: this.companyAccount
					}
					let res = await searchFireWork(this.queryForm)
					this.workList = res.rows
				} else if (index == 2) {
					this.$nextTick(() => {
						this.initChart()
						this.initChartTwo()
						this.initChartThree()
					})

				}
			},
			//作业清单
			async queryWorkList() {
				// console.log("分页", pageNum, pageSize)
				this.queryForm.pageNum = pageNum
				this.queryForm.pageSize = pageSize
				const res = await searchFireWork(this.queryForm);
				// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
				this.$refs.paging.complete(res.rows);
			},
			handleSelect() {
				console.log("222");
			},
			addBtn(url) {
				uni.navigateTo({
					url: url,
					//传递跳转页面的数据
					success: (res) => {
						res.eventChannel.emit('customEvent', {

						})
					}
				});
			},
			async goto(url, row) {
				// console.log("pppp", url)
				let {
					data
				} = await detailFireWork(row.id)

				let specialVo = formatObject(row.specialJobType, "inner"); //里面vo对象
				let specialOutVo = formatObject(row.specialJobType, "out"); //外面的vo对象

				uni.navigateTo({
					url: url,
					//传递跳转页面的数据
					success: (res) => {
						res.eventChannel.emit('customEvent', {
							specialVo: data[specialVo],
							specialOutVo
						})
					}
				});
			},
			//搜索
			search(res) {
				uni.showLoading({
					title: "加载中"
				})
				// this.queryForm.jobNumber = res.value
				this.searchBtn()
				uni.hideLoading()
			},
			//判断有没有权限
			judgeMenuAuth() {
				let menuObj = specialWorkMenu()
				let {
					tabsActive,

				} = menuObj
				this.tabsActive = tabsActive

				console.log("测试对象", menuObj)
			},
			input(res) {
				console.log("----input:", res);
			},
			clear(res) {
				this.queryForm = {
					pageNum: 1,
					pageSize: 10,
					specialJobType: this.options[this.index].label
				}
				this.searchBtn()
			},
			blur(res) {
				uni.showToast({
					title: "blur事件，输入值为：" + res.value,
					icon: "none",
				});
			},
			focus(e) {
				// uni.showToast({
				//   title: "focus事件，输出值为：" + e.value,
				//   icon: "none",
				// });
			},
			cancel(res) {
				uni.showToast({
					title: "点击取消，输入值为：" + res.value,
					icon: "none",
				});
			},
			getAllUser() {
				store.dispatch("GetAllUser")
			}
		},
		watch: {
			$route(val) {
				this.queryForm = {
					specialJobType: this.options[this.index].label
				}

				this.searchBtn()
			},
			tabsActive() {

			}
		},
		computed: {
			...mapGetters(["companyAccount"])
		},
		mounted() {
			this.searchBtn()
			this.getAllUser()
			this.getSomCompany()

		},
		beforeDestroy() {
			if (this.myChart) {
				this.myChart.dispose()
			}
		}
	};
</script>

<style lang="scss" scoped>
	.special-container {
		$nav-height: 30px;
		overflow-y: auto;
		padding: 24rpx;
		background: #FBFBFB;
		// background: linear-gradient(180deg, #bbd9fe 0%, rgba(202, 231, 255, 0) 100%);

		.fix-top {
			position: fixed;
			left: 0;
			top: 75rpx;
			width: 100%;
			// background: linear-gradient(180deg, #bbd9fe 40%, rgba(202, 231, 255, 0.4) 100%);
			background: linear-gradient(360deg, #f2f2f26b 10%, #B8D7FF 100%);
			z-index: 1;
			padding: 20rpx;

			.work-type-board {
				height: 176rpx;
				margin-bottom: 20rpx;
				background: #ffffff;
				border-radius: 16rpx;
				border: 2rpx dashed #c5c8ce;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 26rpx;
				color: #808695;
				line-height: 156rpx;
				text-align: center;
				font-style: normal;

				.content {
					height: 100%;

					.check-title {
						height: 36rpx;
					}
				}
			}

		}

		::v-deep {
			.uni-navbar {
				.uni-navbar--border {
					background-color: transparent !important;
					border-bottom: none !important;

					.uni-navbar__header {
						background-color: transparent !important;

						.uni-navbar__header-btns-left {
							width: 0 !important;
						}

						.uni-navbar__header-btns-right {
							.city {
								color: #137EE9;
								font-size: 18px;
								font-weight: 400;
							}
						}
					}
				}
			}
		}

		.input-view {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			// width: 500rpx;
			flex: 1;
			background-color: #f8f8f8;
			height: $nav-height;
			border-radius: 15px;
			padding: 0 15px;
			flex-wrap: nowrap;
			margin: 7px 0;
			line-height: $nav-height;
		}

		.input-uni-icon {
			line-height: $nav-height;
		}

		.nav-bar-input {
			height: $nav-height;
			line-height: $nav-height;
			/* #ifdef APP-PLUS-NVUE */
			width: 370rpx;
			/* #endif */
			padding: 0 5px;
			font-size: 12px;
			background-color: #f8f8f8;
		}

		.work-manage {
			position: relative;

			.statistics-item {
				height: 624rpx;
				width: 100%;
				background-color: #fff;
				border-radius: 16rpx;
				margin: 20rpx 0;

				.font-title {
					// height: 40rpx;
					font-weight: 600;
					font-size: 28rpx;
					color: #17233D;
					line-height: 40rpx;
					text-align: left;
					padding: 24rpx 0 20rpx 20rpx;
				}

				//当月审批
				.top-area {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.two-left-title {
						@extend .font-title;
					}

					.view-select {
						::v-deep {
							.uni-select {
								height: 27px;
								width: 105px;
							}
						}
					}
				}

				.statistics-content {

					.legend-data {
						width: 225px;
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						float: right;

						.legend-item {
							display: flex;
							align-items: center;
							margin: 4rpx 10rpx;

							.left-icon {
								width: 24rpx;
								height: 6rpx;
								margin-right: 6rpx;
							}

							.right-title {
								font-weight: 400;
								font-size: 20rpx;
								color: #515A6E;
							}
						}
					}
				}
			}

		}

		.tabs {
			padding: 0 26rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			height: 60rpx;

			.uni-searchbar {
				.uni-searchbar__box {
					background: #fff !important;
				}
			}


			.tabs-item {
				padding-bottom: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #17233d;
				line-height: 36rpx;
				text-align: center;
				font-style: normal;
			}

			.tabs-item-active {
				height: 60rpx;
				font-family: PingFangSC, PingFang SC;
				border-bottom: 8rpx solid #137ee9;
				font-weight: 600;
				font-size: 32rpx;
				color: #137ee9;
				line-height: 44rpx;
				text-align: center;
				font-style: normal;
			}
		}

		// 九大作业类型
		.work-type,
		.work-list {

			.list-view-item {
				margin-bottom: 20rpx;
				padding: 20rpx;
				background: #ffffff;
				border-radius: 16rpx;

				.title {
					margin-bottom: 20rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #515a6e;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;

					.title-flow {
						margin-left: 8rpx;
						color: #137ee9;
					}
				}

				.btns {
					width: 90%;
					margin-top: 20rpx;
					margin-left: 30%;
					display: flex;

					::v-deep {
						.list-btn {
							height: 64rpx;
							background: #137ee9;
							border-radius: 8rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #ffffff;
							line-height: 64rpx;
							text-align: center;
							font-style: normal;
						}

						.is-hover {
							background-color: #0062cc;
						}

						.list-click {
							margin-right: -120rpx;
							background: #ffffff;
							color: #000;
						}
					}
				}

				.btns-two {
					text-align: right;
				}
			}
		}

		// 作业清单
		.work-list {
			.select {
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #17233d;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;

				.select-icon {
					vertical-align: middle;
				}
			}
		}
	}
</style>